/*
* @Author: yyf
* @Create: 2018/4/12
* @description: 事件——退出方组件
*/
<template>
    <div class="custom-box p-20">
        <el-row class="custom-title m-t-20 m-b-20">
            <h3>退出方</h3>
            <button type="button"
                @click="addQuitor('-1')"
                class="custom-btn custom-btn-round m-l-10">
                <i class="fa fa-plus"></i>
            </button>
        </el-row>
        <el-table :data="eventExitSearchData">
            <el-table-column label="ID" prop="id" width="70px"></el-table-column>
            <el-table-column label="退出方名称" prop="exitName"></el-table-column>
            <el-table-column label="退出方类型" prop="businessType">
                <template slot-scope="scope">
                    {{scope.row.businessType | getDicNameById('companyIdentity')}}
                </template>
            </el-table-column>
            <el-table-column label="退出金额" prop="effectiveMoney">
                <template slot-scope="scope">
                    {{scope.row.effectiveMoney}}{{scope.row.currencyType}}
                </template>
            </el-table-column>
            <el-table-column label="退出回报率" prop="computeIncome"></el-table-column>
            <el-table-column label="退出持有股份" prop="exitStock"></el-table-column>
            <el-table-column label="退出股权价值" prop="exitValue"></el-table-column>
            <el-table-column label="操作" width="180px">
                <template slot-scope="scope">
                    <el-button type="text" @click="addQuitor('1', scope.row)">编辑</el-button>
                    <el-button type="text" @click="deleteEventExit(scope.row.id)">删除</el-button>
                    <el-button type="text" @click="relevance(1, scope.row)" v-if="scope.row.status!==1">关联</el-button>
                    <el-button type="text" @click="relevance(2, scope.row)" v-if="scope.row.status===1">取消关联</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="addQuitorDialog" :title="titleName">
            <el-tabs @tab-click="selectTab" :value="tabIndex">
                <el-tab-pane label="机构">
                    <div v-if="tabIndex==='0'">
                        <ExitFormDialog 
                            @closeDialog="closeDialog" 
                            :formTitle="'org'"
                            :eventExitDto="eventExitDto">
                        </ExitFormDialog>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="投资人">
                    <div v-if="tabIndex==='1'">
                        <ExitFormDialog 
                            @closeDialog="closeDialog" 
                            :formTitle="'investor'"
                            :eventExitDto="eventExitDto">
                        </ExitFormDialog>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="企业">
                    <div v-if="tabIndex==='2'">
                        <ExitFormDialog 
                            @closeDialog="closeDialog" 
                            :formTitle="'enterprise'"
                            :eventExitDto="eventExitDto">
                        </ExitFormDialog>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component } from 'vue-property-decorator';
import { EventExitDto, CompanyOpenSearchVO } from '../../../api/Interface';
import { EventPublicSearchDto } from '../../../service/event/Interface';
import EventExitService from '../../../service/event/quitor/index';
import ExitFormDialog from './formDialog.vue';
@Component({
    components: {
        ExitFormDialog, // 机构、投资人、企业弹框
    }
})
export default class Quitor extends Vue {
    // 初始化数据
    public eventPublicSearchDto: EventPublicSearchDto = {} as EventPublicSearchDto; // 退出方列表参数
    public eventExitSearchData: Array<EventExitDto> = []; // 退出列表
    public companyOpenSearch: CompanyOpenSearchVO = {} as CompanyOpenSearchVO; // 企业信息
    public eventExitDto: EventExitDto = {} as EventExitDto; // 退出方添加参数
    public eventId: string = ''; // 地址栏ID
    public tabIndex: string = '0';
    public addQuitorDialog: boolean = false;
    public enterpriseDialog: boolean = false;
    public isAdd: boolean = false; // 是否添加
    public formTitle: string = ''; // 弹出框
    public titleName: string = ''; // 弹出框标题

    // 声明周期钩子
    public mounted() {
        this.eventId = this.$route.params.eventId;
        this.getEventExitPage(); // 获取退出方列表
    }

    // 方法
    public selectTab(tab: {index: string}) {
        this.tabIndex = tab.index;
    }
    // 获取退出方列表
    public async getEventExitPage() {
        this.eventPublicSearchDto['pageParam.pageIndex'] = 1;
        this.eventPublicSearchDto['pageParam.pageParam'] = 10;
        this.eventPublicSearchDto.eventId = this.eventId;
        const res = await EventExitService.getEventExitPage(this.eventPublicSearchDto);
        if (res.resCode === '0') {
            this.eventExitSearchData = res.data;
        }
    }
    // 关闭退出方弹框
    public closeDialog() {
        this.addQuitorDialog = false;
        this.getEventExitPage();
    }
    // 添加退出方
    public addQuitor(num: string, info: EventExitDto) {
        this.addQuitorDialog = true;
        this.eventExitDto = {} as EventExitDto;
        this.eventExitDto.fundPersonIds = [];
        this.eventExitDto.orgPersonIds = [];
        if (num === '-1') { // 添加
            this.isAdd = true;
            this.titleName = '退出方/添加退出方';
        } else { // 修改
            this.isAdd = false;
            this.titleName = '退出方/修改退出方';
            this.eventExitDto = info;
            switch (info.businessType) {
                case 2: 
                    this.tabIndex = '0';
                    break;
                case 15: 
                    this.tabIndex = '1';
                    break;
                case 1: 
                    this.tabIndex = '2';
                    break;
                default: 
                    this.tabIndex = '0';
                    break;
            }
        }
    }
    // 查询企业名称
    public getEnterprise() {
        this.enterpriseDialog = true;
    }
    // 删除退出方
    public deleteEventExit(id: number) {
        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(async () => {
            const res = await EventExitService.deleteEventExit(id);
            if (res.resCode === '0') {
                this.$message.success('删除成功！');
                this.getEventExitPage();
            }
        });
    }
    // 关联
    public relevance(num: number, item: EventExitDto) {
        const message = num === 1 ? '确定信息关联？' : '取消信息关联？';
        const info = num === 1 ? '信息关联成功！' : '取消信息关联成功！';
        this.$confirm(message, '提示', {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'warning'
        }).then( async () => {
            item.status = num;
            const {resCode} = await EventExitService.updateEventExit(item);
            if (resCode === '0') {
                this.$message.success(info);
                this.getEventExitPage();
            }
        });
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>

</style>
